﻿/*重置浏览器样式*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#bluestroop {
    width: 100%;
    height: 2px;
    background-color: #4ba9df;
}



body {
    background-color: #fff !important;
}



#logonav {
    margin: auto;
    width: 1200px;
}

#logo {
    width: 180px;
    height: 75px;
    background-image: url(index/logo.png);
    float: left;
}

#nav {
    width: 776px;
    float: right;
    line-height: 75px;
    color: #fff;
}

.navitem {
    width: 100px;
    float: left;
    margin-right: 2px;
    font-family: Microsoft Yahei;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

    .navitem:hover {
        background-color: #2A2F39;
    }

.home-menu-item-selected {
    background-color: #2A2F39;
}

#signinsignup {
    float: right;
    width: 210px;
    height: 32px;
    margin-top: 24px;
    font-family: Microsoft Yahei;
    font-size: 14px;
}

#signin {
    float: right;
    width: 82px;
    height: 30px;
    border: 1px #5a5d69 solid;
    border-radius: 3px;
    margin-left: 15px;
    color: #f7f7f7;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

    #signin:hover {
        background-color: #363C49;
    }

#signup {
    float: right;
    width: 82px;
    height: 30px;
    background-color: #3890CA;
    border: 1px #2673A1 solid;
    border-radius: 3px;
    margin-left: 15px;
    color: #f7f7f7;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

    #signup:hover {
        background-color: #0083C8;
    }

#banner {
    height: 407px;
    /*color:#222;
    background:#f0f0f0;*/
}

.morecourse {
    height: 210px;
    background-color: #eeeeee;
    cursor: pointer;
}

#right {
    float: left;
    width: 280px;
    min-height: 100px;
    /*margin-left: 8px;
    margin-right: 8px;*/
}

#welcome {
    margin-top: 68px;
    width: 100%;
    height: 162px;
    border-color: #f4f4f4;
}

#welcome-content {
    margin-top: 15px;
    margin-left: 15px;
}

.bluebtn {
    background-color: #3890CA;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.fbtn {
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-family: Microsoft Yahei;
}

#question,
#subject {
    margin-top: 20px;
    width: 100%;
    border-color: #f4f4f4;
}

.subject-item {
}

#purchase {
    margin-top: 20px;
    width: 100%;
    height: 260px;
    border-color: #f4f4f4;
    overflow: hidden;
}

#btnarea div {
    margin-top: 10px;
}

.teacherimg {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    float: left;
    margin-right: 10px;
}

#btnarea {
    margin: auto;
    width: 250px;
    display: block;
    overflow: hidden;
}

#welcome-vip {
    float: right;
    margin-top: 10px;
    margin-right: 15px;
}

.home-questionContent {
    margin: auto;
    width: 250px;
    display: block;
    margin-top: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.purchaseitem {
    margin-top: 6px;
}

    .purchaseitem p {
        float: left;
    }

.questionitem {
    overflow: hidden;
    margin-top: 14px;
}

.moveup {
    -webkit-animation: scrollText1 60s infinite ease;
    animation: scrollText1 60s infinite ease;
}

.home-purchaseContent {
    margin: auto;
    width: 250px;
    display: block;
    margin-top: 12px;
    overflow: hidden;
    height: 230px;
}

.teachername {
    margin-top: 2px;
    float: left;
    width: 180px;
}

.purchaseitem:hover div {
    text-decoration: underline;
}


@-webkit-keyframes scrollText1 {
    0% {
        -webkit-transform: translateY(0px);
    }

    10% {
        -webkit-transform: translateY(0px);
    }

    20% {
        -webkit-transform: translateY(-230px);
    }

    30% {
        -webkit-transform: translateY(-230px);
    }

    40% {
        -webkit-transform: translateY(-460px);
    }

    50% {
        -webkit-transform: translateY(-460px);
    }

    60% {
        -webkit-transform: translateY(-690px);
    }

    70% {
        -webkit-transform: translateY(-690px);
    }

    80% {
        -webkit-transform: translateY(-920px);
    }

    90% {
        -webkit-transform: translateY(-920px);
    }

    100% {
        -webkit-transform: translateY(-1150px);
    }
}

@keyframes scrollText1 {
    0% {
        transform: translateY(0px);
    }

    20% {
        transform: translateY(-230px);
    }

    40% {
        transform: translateY(-460px);
    }

    60% {
        transform: translateY(-690px);
    }

    80% {
        transform: translateY(-920px);
    }

    100% {
        transform: translateY(-1150px);
    }
}



.questionitem:hover .questioncontent {
    text-decoration: underline;
}

.questioncontent {
    margin-top: 12px;
    float: left;
}

.enterspreadlecture {
    margin-top: 20px;
    text-align: center;
}

    .enterspreadlecture:hover {
        color: #3890CA;
    }

.home-lecturesItem {
    display: block;
    overflow: hidden;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom-color: #f4f4f4 !important;
}

    .home-lecturesItem:hover .home-lecturesItemName {
        color: #3890CA;
        text-decoration: underline;
    }

#jiangzuo {
    margin-top: 20px;
}

.home-lecturesItemImg {
    width: 120px;
    height: 68px;
    float: left;
}

.home-lecturesItemImgSRC {
    width: 100%;
    height: 100%;
}

.home-lecturesItemText {
    float: right;
    width: 150px;
    margin-top: -4px;
}

.home-lecturesItemName {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.home-allcourseBtn {
    float: left;
    display: block;
    height: 46px;
    line-height: 46px !important;
    width: 878px;
    text-align: center;
    overflow: hidden;
    margin-top: 20px;
}

    .home-allcourseBtn:hover {
        background-color: #EFEFEF;
    }

.bd {
    border: 1px solid #D7DEE2;
}



.morevideo {
    height: 120px;
    background-color: #eeeeee;
    cursor: pointer;
}



.morecourse:hover {
    background-color: #dddddd;
}

.morevideo:hover {
    background-color: #dddddd;
}

.morecoursecontent {
    text-align: center;
    line-height: 210px !important;
}

.morevideocontent {
    text-align: center;
    line-height: 120px !important;
}

.main {
    /*position: relative;*/
    margin: 0 auto;
    min-height: 700px;
    min-width: 1200px;
}

.container {
    width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

#left {
    float: left;
    width: 900px;
    min-height: 700px;
    margin-bottom: 90px;
}

.course {
    float: left;
    width: 280px;
    height: 350px;
    margin-right: 20px;
}

.coursetitle {
    margin-top: 16px;
}

.coursedescription {
    margin-top: 12px;
    width: 240px;
    min-height: 80px;
}

    .coursedescription p {
        height: 75px;
        overflow: hidden;
    }


.headimage {
    width: 22px;
    height: 22px;
    float: right;
    border-radius: 22px;
    margin-right: 8px;
    visibility: hidden;
}

.pic-image {
    width: 280px;
    height: 210px;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
}

.pic {
    overflow: hidden;
    height: 210px;
}

.course:hover .pic .pic-image {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.loadmore {
    height: 40px;
    background-color: #f2f2f2;
    line-height: 40px !important;
    text-align: center;
    overflow: hidden;
    margin-top: 10px;
}


.adimg {
    width: 280px;
    height: 108px;
    margin-bottom: 10px;
}

.sectiontitle {
    width: 1180px;
    text-align: left;
    line-height: 28px;
    margin-top: 24px;
    margin-bottom: 16px;
}

    .sectiontitle p {
        font-weight: 100 !important;
    }

.courseitem {
    height: 215px;
    margin-left: 20px;
}

.courseitemimg {
    width: 220px;
    height: 120px;
    background-color: #F2F2F2;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
}

.courseitem:hover .courseitemimg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.courseitemtitle {
    margin-top: 6px;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.courseitemtime {
    margin-top: 2px;
}

.courseitemimgsize {
    width: 220px;
    height: 120px;
    overflow: hidden;
}

.join-geekband {
    min-width: 1200px;
    margin-top: 10px;
    margin-bottom: 24px;
}

.join-geekband-title {
    text-align: center;
    margin-bottom: 40px;
}

.join-geekband-item {
    float: left;
    width: 580px;
    height: 260px;
    margin-right: 20px;
    margin-bottom: 24px;
}

.join-geekband-item-previewImg {
    float: left;
    display: block;
    width: 260px;
    height: 260px;
}

.join-geekband-item-intro {
    position: relative;
    float: left;
    width: 320px;
    height: 260px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #f9f9f9;
}

    .join-geekband-item-intro h3 {
        font-size: 19px;
        font-weight: bold;
        color: #333;
        margin-top: 12px;
        margin-bottom: 0;
    }

    .join-geekband-item-intro .duration {
        color: #3290ca;
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .join-geekband-item-intro .desc {
        color: #777777;
        margin-top: 24px;
        font-size: 13px;
    }

.button-blueborder-whitefacet-100-36 {
    color: white;
    background-color: #3290ca;
    border-radius: 4px;
}

    .button-blueborder-whitefacet-100-36:hover {
        background-color: #0083C8;
    }

.join-geekband-item-intro-button {
    position: absolute;
    bottom: 12px;
}


.comments {
    background-image: url(http://boolan.com/img/background2.png);
    color: #fff;
    height: 370px;
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 13px;
}

.comment-item {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    height: 232px;
}

    .comment-item blockquote {
        margin-left: 0;
        height: 110px;
    }

    .comment-item .comment-item-avatar {
        width: 80px;
        height:100px;
        display: block;
        border-radius: 50%;
        float: left;
        margin-right: 20px;
       
    }

    .comment-item .commenter {
        font-weight:bold;
        margin-top:50px;
    }

    .comment-item p {
        margin-top: 3px;
        margin-bottom: 3px;
    }

.triangle {
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 20px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    left: 50px;
}

.comment-item-wrapper {
    position: relative;
}

.us {
    margin-top: 60px;
    margin-bottom: 60px;
    color: #777;
    font-size: 13px;
}

    .us h4 {
        margin-bottom: 24px;
        font-weight: normal;
        font-size: 16px;
        color: #000000;
    }

    .us p {
        margin-top: 12px;
    }

.us-item {
    float: left;
    width: 380px;
    margin-right: 20px;
    min-height: 1px;
}

.news-report {
    margin-bottom: 12px;
}

    .news-report img {
        display: block;
        float: left;
        margin-right: 12px;
    }

    .news-report a {
        color: #777;
        font-size: 13px;
        text-decoration: none;
    }

        .news-report a p {
            margin-top: 0;
        }

    .news-report:before,
    .news-report:after {
        content: " ";
        display: table;
    }

    .news-report:after {
        clear: both;
    }



/*banner轮播*/
/* focus */
/*#focus {
    width: 100%;
    height: 407px;
    overflow: hidden;
    position: relative;
}

    #focus ul {
        width: 300%;
        height: 407px;
        overflow: hidden;
        position: absolute;
    }

        #focus ul li {
            float: left;
            width: 100%;
            height: 100%;
            overflow: hidden;*/
/*position: relative;*/
/*background: #000;
        }*/

/*banner轮播*/
/* focus */
#focus {
    width: 100%;
    height: 407px;
    overflow: hidden;
    position: relative;
}

    #focus ul {
        width: 300%;
        height: 407px;
        overflow: hidden;
        position: absolute;
    }

        #focus ul li {
            float: left;
            width: 50%;
            height: 100%;
            overflow: hidden;
            /*position: relative;*/
            background: #000;
        }



    /*#focus .btnBg {
        position: absolute;
        width: 100%;
        height: 20px;
        left: 0;
        bottom: 0;
        background: #000;
        text-align:center;
    }*/

    #focus .btn {
        position: absolute;
        height: 20px;
        width: 90px;
        left: 50%;
        margin-left: -45px;
        bottom: 0;
        text-align: center;
    }

        #focus .btn span {
            display: inline-block;
            width: 25px;
            height: 6px;
            margin-bottom: 10px;
            margin-left: 5px;
            cursor: pointer;
            background: #fff;
        }

            #focus .btn span.on {
                background: #fff;
            }

    #focus .preNext {
        width: 45px;
        height: 100px;
        position: absolute;
        top: 150px;
        background: url(http://boolan.com/Contents/Images/Home/toggle.png) no-repeat 0 0;
        cursor: pointer;
    }

    #focus .pre {
        left: 0;
    }

    #focus .next {
        right: 0;
        background-position: right top;
    }
